<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-container fluid fill-height>
      <v-layout justify-center align-start row wrap>
        <v-flex xs12 md12>
          <v-btn color="green darken-1" dark @click="openEquipDialog">
            <span class="mx-1">添加装备</span>
            <v-icon color="white">add</v-icon>
          </v-btn>
          <!-- <v-btn color="blue darken-1" dark @click="uploadHeroEquipment">
            <span class="mx-1">保存装备</span>
            <v-icon color="white">save</v-icon>
          </v-btn> -->
        </v-flex>
        <v-flex text-xs-center md12 xs12>
          <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
            <template slot="items" slot-scope="props">
              <td class="text-xs-center subheading">{{ props.item.equName }}</td>
              <td class="text-xs-center subheading">{{ props.item.money }}</td>
              <td class="text-xs-center subheading">{{ props.item.equType | EquipType }}</td>
              <td class="text-xs-center subheading">
                <v-avatar size="36" tile>
                  <img :src="props.item.equUrl" alt="">
                </v-avatar>
              </td>
              <td class="text-xs-center">
                <v-btn flat round dark color="red darken-1" class="mx-1" @click="deleteItem(props)">
                  <span class="mx-1">删除</span>
                  <v-icon color="red darken-1">delete_forever</v-icon>
                </v-btn>
              </td>
            </template>
            <template slot="no-data">
              <div class="text-md-center">
                <v-icon color="yellow darken-3">warning</v-icon>
                <span class="subheading">请添加装备数据</span>
              </div>
            </template>
          </v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
    <v-dialog v-model="dialog" persistent max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">添加装备</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md4>
                <v-text-field label="装备名称" required v-model="equipment.equName"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="金币" persistent-hint required v-model="equipment.money"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md6>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>装备图片</span>
                  <input
                    @change="equImageHandler"
                    name="files"
                    type="file"
                    accept="image/jpg;image/png"
                    ref="equImage"
                    class="file-input"
                  >
                </v-btn>
                <img v-show="equImage" :src="equImage" class="dialog-image" alt="" srcset="">
                <!-- <span>{{euqUrlName}}</span> -->
              </v-flex>
              <v-flex xs12 sm6 md6>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>装备关系图</span>
                  <input
                    @change="relationImageHandler"
                    name="files"
                    type="file"
                    accept="image/jpg;image/png"
                    ref="relImage"
                    class="file-input"
                  >
                </v-btn>
                <!-- <span>{{relUrlName}}</span> -->
                <img v-show="relImage" :src="relImage" class="dialog-image" alt="" srcset="">
              </v-flex>

              <!-- <v-flex xs12>
                <v-text-field label="装备说明" required v-model="equipment.remark"></v-text-field>
              </v-flex> -->
              <v-flex xs12 sm6>
                <v-select :items="equTypeItems" v-model="equipment.equType" label="装备类型" required></v-select>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" round dark flat @click="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" round dark flat @click="confirmEquipment">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import axios from "../api";
import { equip } from "../api/request";
import { mapMutations } from "vuex";
export default {
  data: () => ({
    articleTitle: "",
    articleSubTitle: "",
    articleContent: "",
    iamgeIndex: 0,
    imageName: "",
    currentImage: { name: "" },
    equImage: '',
    relImage: '',
    markedArticle: "",
    transArticle: "",
    imageList: [],
    dialog: false,
    // 包含图片
    equUrl: null,
    relationUrl: null,
    equipment: {
      equName: "",
      money: '',
      equType: 1,
      remark: ""
    },
    euqUrlName: "",
    relUrlName: "",
    equTypeItems: [
      {
        text: "攻击",
        value: 1
      },
      {
        text: "法术",
        value: 2
      },
      {
        text: "防御",
        value: 3
      },
      {
        text: "移动",
        value: 4
      },
      {
        text: "打野",
        value: 5
      },
      {
        text: "辅助",
        value: 6
      }
    ],
    tableData: [],
    headers: [
      { text: "装备名称", value: "lftid", align: "center", sortable: false },
      { text: "金币", value: "headUrl", align: "center", sortable: false },
      { text: "装备类型", value: "nickname", align: "center", sortable: false },
      { text: "装备图", value: "nickname", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    limit: 0,
    offset: 0
  }),
  mounted() {
    this.getEquipList();
  },
  filters: {
  },
  methods: {
    openEquipDialog() {
      this.equipment = {
      equName: "",
      money: '',
      equType: 1,
      remark: ""
    }
      this.dialog = true;
    },
    confirmEquipment() {
      // this.tableData.push({
      //   ...this.equipment
      // });
      this.uploadHeroEquipment();
      this.dialog = false;
    },
    deleteItem(item) {
      // this.tableData.splice(item.index, 1);
      // console.warn(item);
    },
    getEquipList() {
      let params = {
        // limit: this.limit,
        // offset: this.offset
      }
      equip.getEquipList.r(params).then(({data})=>{
        console.log('getEquipList', data)
        this.tableData = data.data.dataList;
      })
    },
    uploadHeroEquipment() {
      let form = new FormData();
      form.append("equName", this.equipment.equName);
      form.append("money", this.equipment.money);
      form.append("equType", this.equipment.equType);
      form.append("equUrl", this.equipment.equUrl);
      form.append("remark", this.equipment.remark);
      form.append("relationUrl", this.equipment.relationUrl);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      equip.uploadHeroEquipment.r(form, config).then(({ data }) => {
        alert(data.messsage)
        console.log(data);
      });
    },
    uploadArticle() {
      let content = this.stringifyArticle(
        this.$refs.articleEditbox.textContent
      );
      console.log(content);
      let form = new FormData();
      form.append("title", this.articleTitle);
      form.append("source", this.articleSubTitle);
      form.append("content", content);
      let imgs = [];
      this.imageList.forEach((item, i) => {
        // form.append([`image${i}`], item.file);
        imgs.push(item.file);
      });
      form.append("pictureUrl", imgs);
      form.append("type", 1);
      form.append("star", 0);
      form.append("like", 0);
      // form.append('files', imgs);

      console.error(form);
      article.uploadArticle.r(form, config).then(({ data }) => {
        console.log(data);
        alert(data.message);
      });
    },
    equImageHandler(ev) {
      let file = ev.target.files[0];
      this.equipment.equUrl = file;
      this.euqUrlName = file.name;
      let fr = new FileReader();
      let that = this;
      fr.onload = (res) => {
        this.equImage = res.target.result;
      }
      fr.readAsDataURL(file);
    },
    relationImageHandler(ev) {
      let file = ev.target.files[0];
      this.equipment.relationUrl = file;
      this.relUrlName = file.name;
      let fr = new FileReader();
      let that = this;
      fr.onload = (res) => {
        this.relImage = res.target.result;
      }
      fr.readAsDataURL(file);
    }
  }
};
</script>
<style lang="less" scoped>
#marked-article {
  text-align: left;
  font-size: 18px;
  padding: 0.8rem 1rem;
  height: 100%;
}

img {
  width: 100%;
}

.article-content {
  min-height: 12em;
  width: 100%;
  text-align: left;
  padding: 1em;
  font-size: 1.2rem;
}

.image-list {
  li {
    display: flex;
    flex-direction: column;
    list-style: none;
    .image-list-item {
      width: 5rem;
    }
    .image-list-name {
      font-size: 1rem;
    }
  }
}

.input-wrapper {
  display: inline-block;
  position: relative;
  // width: 6rem;
  // height: 3.2rem;
  // border: 2px dashed #5ff44a;
  // border-radius: 4px;
  .file-input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
  }
}
</style>